<!DOCTYPE html>
<!--
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE,NO-STORE" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<meta http-equiv="EXPIRES" content="-1">
<title>Pulse</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />

<!-- fix IE Ui issues-->
<!--[if IE 7]>
                <link href="css/ie/ie7.css" type="text/css" rel="stylesheet"/>
         <![endif]-->
<!--[if IE 8]>
                <link href="css/ie/ie8.css" type="text/css" rel="stylesheet"/>
         <![endif]-->
<!--[if IE 9]>
                <link href="css/ie/ie9.css" type="text/css" rel="stylesheet"/>
         <![endif]-->
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
        <script src='scripts/lib/html5.js'></script>
        <script type="text/javascript" src="scripts/lib/excanvas.js"></script>
        <script type="text/javascript"> if (!window.console) console = {log: function() {}}; </script>
                <![endif]-->

<script type="text/javascript" src='scripts/lib/jquery-1.7.2.js'></script>
<script type="text/javascript" src='scripts/lib/common.js'></script>

<!--Splitter-->
<script src="scripts/lib/split.js"></script>

<!--Custom Scroll Bar-->
<!-- styles needed by jScrollPane - include in your own sites -->
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet"
	media="all" />
<!-- the mousewheel plugin -->
<script type="text/javascript" src="scripts/lib/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="scripts/lib/jquery.jscrollpane.js"></script>
<!--Place Holder tag-->
<script type="text/javascript" src="scripts/lib/jquery.placeholder.js"></script>

<!-- Grid view CSS and js-->
<link rel="stylesheet" type="text/css" media="screen" href="css/grid/ui.jqgrid.css" />
<script src="scripts/lib/grid.locale-en.js" type="text/javascript"></script>
<script src="scripts/lib/jquery.jqGrid.src.js" type="text/javascript"></script>
<script src="scripts/lib/jquery.tablednd.js" type="text/javascript"></script>
<!-- -->
<!--Tree View-->
<link type="text/css" href="css/treeView/Treemap.css" rel="stylesheet" />
<script type="text/javascript" src="scripts/lib/jit.js"></script>

<!-- popups-->
<link href="css/popup.css" rel="stylesheet" type="text/css" />
<!-- Treeview JSON -->
<script type="text/javascript" src="scripts/lib/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="scripts/lib/jquery.ztree.excheck-3.5.js"></script>
<link rel="stylesheet" href="css/jquery.ztreestyle.css" type="text/css">

<!-- jQuery plugin to support automatically updating fuzzy timestamps 
(e.g. "4 minutes ago" or "about 1 day ago") -->
<script type="text/javascript" src="scripts/lib/jquery.timeago.js"></script>

<!-- start:Data Browser widget based js files -->
<script type="text/javascript" src="scripts/pulsescript/PulseCallbacks.js"></script>
<script type="text/javascript" src="scripts/pulsescript/PulseFunctions.js"></script>
<script type="text/javascript" src='scripts/pulsescript/common.js'></script>
<!-- end:Data Browser widget based js files -->

<!-- end:Data Browser Page JS files -->

<script type="text/javascript" src="scripts/pulsescript/pages/DataBrowser.js"></script>
<script type="text/javascript" src="scripts/pulsescript/pages/DataBrowserQuery.js"></script>
<script type="text/javascript" src="scripts/pulsescript/pages/DataBrowserQueryHistory.js"></script>

<!-- Jquery based plugin for exporting data to a file -->
<script type="text/javascript" src="scripts/lib/jquery.generateFile.js"></script>

</head>

<body>
	<!-- Connection lost-->
	<div class="connectionLostMasterBlock hide" id="connectionStatusDiv">
		<div class="connectionLostInnerBlock">
			<label class="left">Connecting ...</label>
			<div class="clear"></div>
			<div id="connectionErrorMsgDiv" class="right"></div>
		</div>
	</div>

	<div id="canvasWidth">
		<!--Top Links-->
		<div class="headerTopLinksMaster">
			<div class="right">
				<div class="left position-relative"><a href="#." class="left headerTopLinks aboutClicked-Off">About</a>
					<!-- About Dropdown-->
	        <div id="detailsAbout" class="aboutBlock display-none">
	          <div class="aboutDetailsBlock">
	            <div class="left widthfull-100per marginBottom30">
	              <div class="left"><img src="images/about-geode.png">
	                <div>
	                 <div class="aboutVersionBlock left" id="pulseVersion"></div>
	                 <div class="left termsBlock">&nbsp;<a id="pulseVersionDetailsLink" href="#dialog1" class="display-none" >Version Details</a></div>
	                </div>
	              </div>
	              <div class="right aboutText">The Pulse tool monitors Apache Geode system in real time. It provides health information, detailed operational and configuration data, system alerts, throughput performance and statistics for system members and connected clients.</div>
	            </div>
				  <div class="left widthfull-100per copyright">
					  <p>Apache Geode (incubating)<br>
						  Copyright 2016 The Apache Software Foundation.</p>
					  <p>&nbsp;</p>
					  <p>This product includes software developed at
						  The Apache Software Foundation (http://www.apache.org/).</p>
				  </div>
	            </div>
	        </div>
				</div>
				<div class="left headerTopSeperator"></div>
	      <div class="left"><a target="_blank" href="http://geode.docs.pivotal.io/docs/tools_modules/pulse/chapter_overview.html" class="left headerTopLinks">Help</a></div>
	      <div class="left headerTopSeperator"></div>
	      <div class="left headerTopLinks welcomeLabelPRZero">Welcome</div>
	      <div class="left headerTopLinks textbold font-size12" id="userName"></div>
	      <div class="left headerTopSeperator"></div>
	      <div class="left"><a href="pulse/clusterLogout" class="left headerTopLinks">Sign Out</a></div>
			</div>
		</div>
		<!-- Header block-->
		<header>
      <div class="left">
        <a id="clusterNameLink" href="#." class="left textbold HeaderLink HeaderLinkActive" onclick="openClusterDetail();">Cluster View</a>
      </div>
			<div class="textbold right logoBlock">
				<img src="images/apache_geode_logo.png"/><a href="#.">[LOGO]</a>
			</div>
		</header>
		<div class="clear"></div>
		<div class="subHeader">
		<ul>
			<li><a href="#." onclick="openClusterDetail();">Cluster View</a></li>
			<li><a href="#." class="active" onclick="openDataBrowser();">Data Browser</a></li>
			<!-- Hide Query Statistics tab for gemfire -->
			<li id="subTabQueryStatistics"><a href="#." onclick="openQueryStatistics();">Query Statistics</a></li>
		</ul>
		<div class="clear"></div>
		</div>
		<!-- Middle block-->
		<div class="left widthfull-100per">
			<!--Top Right Block 1-->
			<div class="right widthfull-100per marginTB10">
                            
				<!-- Tab-->
				<div id="notificationsPanel" class="right marginL10 TabTopPanel position-relative" 
				data-role="widget" data-widgetid="CluserAlertNotification" data-active ="yes" data-timeline="5000">
				</div>
				<!--   <div class="right marginL10"><a href="dataView.html" class="left linkButton">Cluster View</a></div>-->
				<div class="left position-relative breadCrumbs">
					<label class="font-size20">Data Browser</label>
				</div>
			</div>
			<!--Middle Block 1-->
			<div class="left leftBlockCanvas">
				<!-- Splitter Master-->
						<div id="widget">
							<!-- Left splitter-->
							<div id="leftBlock" class="split split-horizontal">
								<div id="dataRegion" class="split split-vertical">
								  <div class="rightInnerBlocks">
								    <a class="active" href="#.">Data Regions</a>
								  </div>
									<!-- Search Block 1-->
									<div class="left widthfull-100per canvasBlockInnerBlock">
										<!-- Search-->
										<div class="regionNameSearch position-relative">
											<div class="searchBlockRegion">
												<input type="button" class="searchButtonRegion"> <input
													type="text" id="filterTextRegion" placeholder="Type a Name"
													class="searchBoxRegion" onKeyUp="applyFilterOnRegions();">
											</div>
										</div>
									</div>
									<!-- Block 2-->
									<div class="pointGridHeading">
										<a id="linkColocatedRegions" href="#." 
										  class="colocatedRegionsLink disabledLink" 
										  onclick="showColocatedRegions();">Colocated Regions</a>
										<a id="linkAllRegions" href="#." 
										  class="colocatedRegionsLink disabledLink"
										  onclick="showAllRegions();">All Regions</a>
										<input type="hidden" id="selectedRegion" value=""/>
									</div>
									<!-- Block 3 with scroll-->
									<div class="ScrollPaneBlock leftSliderScrollRegion">
										<div class="splitterScrollRegionInnerBlock">
											<!-- Tree View-->
											<ul id="treeDemo" class="ztree">
											</ul>
										</div>
										<div style="clear: both"></div>
									</div>
								</div>
								<!-- Members List Block-->
								<div id="regionMember" class="split split-vertical">
								  <div class="rightInnerBlocks btm_pnl">
								    <a href="#." class="active">Region Members</a>
								  </div>
								  <div class="ScrollPaneBlock leftSliderScrollMembers" style="background:#132634;">
								    <div class="splitterScrollMembersInnerBlock">
								      <ul id="membersList">
								      </ul>
								    </div>
								    <div style="clear:both"></div>
								  </div>
								</div>
							</div>
							<!--Right splitter -->
							<div id="rightBlock" class="split split-horizontal">
								<!-- Tab links-->
								<div class="rightInnerBlocks ">
								  <a href="#." class="active">Queries</a>
								</div>
								<!-- Query Block-->
								<div class="queryMasterBlock">
								  <a href="#." class="historyClicked-Off" id="historyIcon">History</a>
                                  <!-- Query Block-->
                                  <div class="queryHistoryScroll-pane" id="detailsHistory">
                                  <div id="detailsHistoryList"></div>
                                  </div>
									<div class="queryInnerBlock queriesblock marginTB15-10">
										<div class="queryHistoryBlock">
											<label class="queryBlocklabel">Query Editor</label> 
										</div>
										<div class="quertTextaremargin textareadiv">
											<!-- Textarea-->
											<textarea class="queryTextarea" id="dataBrowserQueryText" onkeyup="onQueryTextChange();"
												placeholder="Write query here"></textarea>
											<!-- Buttons-->
											
										</div>
										<input type="reset" value="Clear" class="right buttonCss blue" onclick="clearDBQuery()">
                                        <input type="button" id="btnExecuteQuery" disabled="disabled" value="Execute" class="right buttonCss grey" onclick="executeDBQuery()">
									</div>
								</div>
								<div class="queryInnerBlock marginBottomResult">
									<label class="queryBlocklabel marginResult left">Result</label>
									<div id="loaderSymbolWrapper" class="loaderParent">
									  <div id="loadingSymbol" class="loader"></div>
									</div>
								</div>
								<div class="ScrollPaneBlock" style="height: 460px;">
									<div class="expCollMaster">
										<!-- Accordion-->
										<div class="accordion" id="memberAccordion">
										</div>
										<div style="clear: both"></div>
									</div>
								</div>
								<div class="quertTextaremargin">
									<!-- Buttons-->
									<input type="button" value="Export Result"
										class="right buttonCss blue" onclick="exportResult();">
								</div>
							</div>
						</div>
					</div>
		</div>
	</div>
	<!--Popups Block-->
	<div id="boxes">
		<!-- Version Details popup-->
		<div id="dialog1" class="window width345">
			<div class="popup_heading">
				<span>Version Details</span><a href="#" class="closePopup">&nbsp;</a>
			</div>
			<div class="popup_contentBlock">
				<div class="popup-innerblock">
					<ul class="widthfull-100per left">
						<li class="left widthfull-100per"><label
							class="width-40 display-inline-block">Pulse Version:</label> <label
							class="width-58 display-inline-block" id="pulseVer"></label></li>
						<li class="left widthfull-100per"><label
							class="width-40 display-inline-block">Build Id:</label> <label
							class="width-58 display-inline-block" id="buildId"></label></li>
						<li class="left widthfull-100per"><label
							class="width-40 display-inline-block">Build Date:</label> <label
							class="width-58 display-inline-block" id="buildDate"></label></li>
						<li class="left widthfull-100per"><label
							class="width-40 display-inline-block">Source Date:</label> <label
							class="width-58 display-inline-block" id="sourceDate"></label></li>
						<li class="left widthfull-100per"><label
							class="width-40 display-inline-block">Source Revision:</label> <label
							class="width-58 display-inline-block" id="sourceRevision"></label>
						</li>
						<li class="left widthfull-100per"><label
							class="width-40 display-inline-block">Source Repository:</label>
							<label class="width-58 display-inline-block"
							id="sourceRepository"></label></li>
					</ul>
					<div class="clear"></div>
				</div>
			</div>
		</div>
  <!-- Grid Details popup-->
  <div id="gridPopup" class="window width700" >
    <div class="popup_heading"><span>Object Explorer</span><a href="#" class="closePopup">&nbsp;</a></div>
    <div class="popup_contentBlock">
      <div class="popup-innerblock">
        <table id="treegrid"><tr><td/></tr></table>
      </div>
      <div class="popup-innerblock">
        <table id="popUpExplorer"><tr><td/></tr></table>
      </div>
    </div>
  </div>
		<!-- Mask to cover the whole screen -->
		<div id="mask"></div>
	</div>
	<div id="tooltip" class="tooltip"></div>
	<!-- Placeholder-->
	<script>
$('input[placeholder], textarea[placeholder]').placeholder();
</script>

</body>
</html>
